<template>
	<view class="container">
		<view>
			<!-- 列表 -->
			<view class="cart-list">
				<block v-for="(item, index) in teacherList" :key="item.id">
					<view class="cart-item" :class="{'b-b': index!==teacherList.length-1}">
						<view class="image-wrapper">
							<image :src="item.picture" class="loaded" mode="aspectFill" lazy-load @load="onImageLoad('teacherList', index)"
							 @error="onImageError('teacherList', index)"></image>
							<view class="yticon icon-xuanzhong2 checkbox" :class="{checked: item.checked}" @click="check('item', index)"></view>
						</view>
						<view class="item-right">
							<text class="clamp title">{{item.userxm}}</text>
							<text class="attr">{{item.userjj}}</text>
							<text class="price">¥{{item.lsprice}}</text>
						</view>
					</view>
				</block>
			</view>
			<!-- 底部菜单栏 -->
			<view class="action-section">
				<view class="total-box">
					<text class="price">¥{{total}}</text>
				</view>
				<button type="primary" class="no-border confirm-btn" @click="createOrder">去结算</button>
			</view>
		</view>
	</view>
</template>

<script>
	import discussMarkApi from '@/api/discussMark.js'
	import payApi from '@/api/pay.js'
	var _this;
	export default {
		data() {
			return {
				teacherList: [],
				selectItem: null,
				total: 0,
				query: {}
			};
		},
		onLoad(query) {
			_this = this;
			_this.query = query
			_this.initData();


		},
		watch: {

		},
		computed: {},
		methods: {
			//请求数据
			initData() {
				discussMarkApi.tea_pd_lsgf().then(res => {
					console.log(res)
					let list = res.data || []
					let teacherList = list.map(item => {
						item.checked = false;
						return item;
					});
					_this.teacherList = teacherList

				})
			},
			//监听image加载完成
			onImageLoad(key, index) {
				this.$set(this[key][index], 'loaded', 'loaded');
			},
			//监听image加载失败
			onImageError(key, index) {
				this[key][index].image = '/static/errorImage.jpg';
			},

			//选中状态处理
			check(type, index) {
				let teacherList = _this.teacherList.map(item => {
					item.checked = false;
					return item;
				});
				_this.teacherList = teacherList
				_this.teacherList[index].checked = !_this.teacherList[index].checked
				console.log(_this.teacherList, index)
				_this.selectItem = _this.teacherList[index]
				_this.total = _this.teacherList[index].lsprice
			},



			//创建订单
			createOrder() {
				if (null == _this.selectItem) {
					uni.showToast({
						icon: 'none',
						title: '请选择一位教师'
					})
					return;
				}

				let dt_id = _this.query.dt_id
				if (!dt_id) {
					uni.showToast({
						icon: 'none',
						title: 'dt_id为空'
					})
					return;
				}
				let {
					usercode
				} = uni.getStorageSync('user')


				if (_this.total == '0.00') {

					payApi.pay_pg_mf({
						dt_id: dt_id,
						tea_code: _this.selectItem.usercode,
						tea_name: _this.selectItem.userxm
					}).then(res => {
						console.log(res)
						uni.showModal({
							title: '提示',
							content: res.msg,
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									//跳转
									uni.redirectTo({
										url: '/pages/discussMark/index'
									})
								}
							}
						});
					})
				} else {

					uni.setStorageSync('pay', {
						'dt_id': dt_id,
						'sp_type': '5',
						'sp_jg': _this.total,
						'tea_code': _this.selectItem.usercode,
						'tea_name': _this.selectItem.userxm
					})
					//跳转回调
					uni.setStorageSync('redirect_pay', {
						id: '1',
						type: "discussMarkList"
					})
					uni.navigateTo({
						url: `/pages/pay/pay`
					})
					
					

				}




			}
		}
	}
</script>

<style lang='scss'>
	.container {
		padding-bottom: 134upx;

		/* 空白页 */
		.empty {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100vh;
			padding-bottom: 100upx;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			background: #fff;

			image {
				width: 240upx;
				height: 160upx;
				margin-bottom: 30upx;
			}

			.empty-tips {
				display: flex;
				font-size: $font-sm+2upx;
				color: $font-color-disabled;

				.navigator {
					color: $uni-color-primary;
					margin-left: 16upx;
				}
			}
		}
	}

	/* 购物车列表项 */
	.cart-item {
		display: flex;
		position: relative;
		padding: 30upx 40upx;

		.image-wrapper {
			width: 160upx;
			height: 160upx;
			flex-shrink: 0;
			position: relative;

			image {
				border-radius: 8upx;
			}
		}

		.checkbox {
			position: absolute;
			left: -16upx;
			top: -16upx;
			z-index: 8;
			font-size: 44upx;
			line-height: 1;
			padding: 4upx;
			color: $font-color-disabled;
			background: #fff;
			border-radius: 50px;
		}

		.item-right {
			display: flex;
			flex-direction: column;
			flex: 1;
			overflow: hidden;
			position: relative;
			padding-left: 30upx;

			.title,
			.price {
				font-size: $font-base + 2upx;
				color: $font-color-dark;
				height: 40upx;
				line-height: 40upx;
			}

			.attr {
				font-size: $font-sm + 2upx;
				color: $font-color-light;
				height: 50upx;
				line-height: 50upx;

				width: 480upx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.price {
				height: 50upx;
				line-height: 50upx;
			}
		}

		.del-btn {
			padding: 4upx 10upx;
			font-size: 34upx;
			height: 50upx;
			color: $font-color-light;
		}
	}

	/* 底部栏 */
	.action-section {

		position: fixed;
		left: 30upx;
		bottom: 30upx;
		z-index: 95;
		display: flex;
		align-items: center;
		width: 690upx;
		height: 100upx;
		padding: 0 30upx;
		background: rgba(255, 255, 255, .9);
		box-shadow: 0 0 20upx 0 rgba(0, 0, 0, .5);
		border-radius: 16upx;

		.checkbox {
			height: 52upx;
			position: relative;

			image {
				width: 52upx;
				height: 100%;
				position: relative;
				z-index: 5;
			}
		}

		.clear-btn {
			position: absolute;
			left: 26upx;
			top: 0;
			z-index: 4;
			width: 0;
			height: 52upx;
			line-height: 52upx;
			padding-left: 38upx;
			font-size: $font-base;
			color: #fff;
			background: $font-color-disabled;
			border-radius: 0 50px 50px 0;
			opacity: 0;
			transition: .2s;

			&.show {
				opacity: 1;
				width: 120upx;
			}
		}

		.total-box {
			flex: 1;
			display: flex;
			flex-direction: column;
			text-align: right;
			padding-right: 40upx;

			.price {
				font-size: $font-lg;
				color: $font-color-dark;
			}

			.coupon {
				font-size: $font-sm;
				color: $font-color-light;

				text {
					color: $font-color-dark;
				}
			}
		}

		.confirm-btn {
			padding: 0 38upx;
			margin: 0;
			border-radius: 100px;
			height: 76upx;
			line-height: 76upx;
			font-size: $font-base + 2upx;
			background: $uni-color-primary;
			box-shadow: 1px 2px 5px rgba(217, 60, 93, 0.72)
		}
	}

	/* 复选框选中状态 */
	.action-section .checkbox.checked,
	.cart-item .checkbox.checked {
		color: $uni-color-primary;
	}
</style>
